@import '~styles/config.scss';

.MaterialGroup {
    width : 100%;
    height: 100%;

    .li {
        cursor : pointer;
        padding: 15px 14px;
        font-size: 12px;
        line-height:20px;
        transition   : all .5s;
        &:hover {
            background: $--background-color-base;
        }

        &.true {
            color      : $--color-primary;
            font-weight: bold;
            background : $--background-color-light;
        }
    }

    .main {

        overflow     : hidden;
        overflow-y   : auto;
        // padding   : 30px;
        box-sizing   : border-box;
        height       : calc(100% - 50px);
    }

    .footer {
        background: $--background-color-base;
        border-top: 1px solid $--border-color-lighter;
        box-sizing: border-box;
        height    : 50px;
        display   : flex;

        .but {
            border-left: 1px solid $--border-color-lighter;
            flex       : 1;

            font-size: 16px;
            cursor   : pointer;

            &:first-child {
                border-width: 0px;
            }

            i {
                width          : 100%;
                height         : 100%;
                display        : block;
                display        : flex;
                align-items    : center;
                justify-content: center;
            }
            &:hover{
            }
            &.false{
                color:$--color-text-placeholder
            }
        }
    }
}